<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: Arial, sans-serif;
      margin: 0;
      background-color: #f5f5f5;
    }

    .container {
      padding: 15px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .footer {
      margin-top: 10px;
      text-align: center;
      font-size: 12px;
      color: #999;
      padding: 5px;
    }

    .footer span {
      display: block;
      line-height: 1.5;
    }

    .footer .version {
      color: #666;
    }

    .footer .copyright {
      color: #666;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 15px;
      margin-bottom: 15px;
      position: relative;
      border-bottom: 1px solid #eee;
    }

    .logo {
      width: 32px;
      height: 32px;
      margin-right: 10px;
      object-fit: contain;
    }

    h3 {
      margin-top: 0;
      margin-bottom: 0;
      color: #333;
      font-size: 16px;
      text-align: center;
    }

    button {
      width: 100%;
      padding: 8px;
      margin: 5px 0;
      cursor: pointer;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 4px;
      transition: background-color 0.3s;
      font-weight: 500;
    }

    button:hover {
      background-color: #1976D2;
    }

    button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }

    #result-container {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #f9f9f9;
    }

    #result {
      margin-bottom: 10px;
      word-break: break-all;
      line-height: 1.4;
      color: #666;
    }

    #result a {
      text-decoration: none;
      display: inline-block;
      margin-top: 5px;
      color: #2196F3;
      font-weight: 500;
    }

    #result a:hover {
      text-decoration: underline;
      color: #1976D2;
    }

    #progress-container {
      display: none;
      margin: 10px 0;
    }

    #progress-bar {
      width: 100%;
      height: 4px;
      background-color: #e0e0e0;
      border-radius: 2px;
      overflow: hidden;
    }

    #progress {
      width: 0%;
      height: 100%;
      background-color: #2196F3;
      transition: width 0.3s ease;
    }

    #progress-text {
      font-size: 12px;
      color: #666;
      text-align: center;
      margin-top: 5px;
    }

    .input-group {
      margin-bottom: 10px;
    }

    .input-group label {
      display: block;
      margin-bottom: 5px;
      color: #666;
      font-size: 14px;
    }

    .input-group input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 14px;
    }

    .input-group input:focus {
      border-color: #2196F3;
      outline: none;
    }

    .settings-btn {
      position: absolute;
      right: 0;
      background: none;
      border: none;
      padding: 5px;
      cursor: pointer;
      width: auto;
      color: #666;
    }

    .settings-btn:hover {
      color: #2196F3;
      background: none;
    }

    .settings-icon {
      width: 20px;
      height: 20px;
    }

    #settings-panel {
      display: none;
    }

    .settings-header {
      height: 32px;
      display: flex;
      align-items: center;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
      position: relative;
    }

    .back-btn {
      position: absolute;
      left: 0;
      background: none;
      border: none;
      padding: 5px;
      cursor: pointer;
      width: auto;
      color: #666;
    }

    .back-btn:hover {
      color: #2196F3;
      background: none;
    }

    .settings-title {
      text-align: center;
      width: 100%;
      margin: 0;
      font-size: 16px;
      color: #333;
    }

    .save-btn {
      margin-top: 15px;
      margin-bottom: 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 主页 -->
    <div class="header">
      <img src="images/icon32.png" alt="Logo" class="logo">
      <h3>Axure原型托管助手</h3>
      <button class="settings-btn" id="settingsBtn" title="设置">
        <svg class="settings-icon" viewBox="0 0 24 24" fill="currentColor">
          <path
            d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
        </svg>
      </button>
    </div>
    <div class="input-group">
      <label for="uploadDir">项目名称</label>
      <input type="text" id="uploadDir" placeholder="例如: project1">
    </div>
    <button id="uploadBtn">一键上传</button>
    <div id="progress-container">
      <div id="progress-bar">
        <div id="progress"></div>
      </div>
      <div id="progress-text">正在上传... 0%</div>
    </div>
    <div id="result-container" style="margin-top: 10px; display: none;">
      <div id="result"></div>
      <button id="copyBtn" style="margin-top: 5px;">复制链接</button>
    </div>
  </div>
  <!-- 设置页 -->
  <div class="container" id="settings-panel">
    <div class="settings-header">
      <button class="back-btn" id="backBtn">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M20,11H7.83l5.59-5.59L12,4l-8,8l8,8l1.41-1.41L7.83,13H20V11z" />
        </svg>
      </button>
      <h3 class="settings-title">设置</h3>
    </div>
    <div class="input-group">
      <label for="apiKey">API密钥</label>
      <input type="text" id="apiKey" placeholder="请输入API密钥">
    </div>
    <div class="input-group">
      <label for="serverUrl">服务器地址</label>
      <input type="text" id="serverUrl" placeholder="请输入服务器地址">
    </div>
    <button id="saveSettingsBtn" class="save-btn">保存设置</button>
  </div>
  <!-- 版权信息 -->
  <div class="footer">
    <span class="version">Version 1.0.0</span>
    <span class="copyright">&copy; 2024 All Rights Reserved</span>
  </div>
  <script src="config.js"></script>
  <script src="popup.js"></script>
</body>

</html>